<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <memberOfTheFileEdit ref="MemberOfTheFileEdit" v-on:save-finished="getMemberList()"></memberOfTheFileedit>
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="档案号/姓名/手机号" size="small" v-model="search.value">
            <el-button slot="append" icon="el-icon-search" @click="getMemberList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" 
             @click="handleCreateRole()">添加</el-button>
        </el-col>        
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="h_MemberOfTheFileList" border size="mini" header-cell-class-name="header-row">
            <el-table-column align="center" prop="hFn" label="档案号" header-align="center"></el-table-column>
            <el-table-column align="center" prop="hName" label="姓名" header-align="center"></el-table-column>         
            <el-table-column align="center" prop="hSex" label="性别" header-align="center"></el-table-column>
            <el-table-column align="center" prop="hAge" label="年龄" header-align="center"></el-table-column>         
            <el-table-column align="center" prop="hThehealthmanager" label="健康管理师" header-align="center"></el-table-column>
            <el-table-column align="center" prop="hPhone" label="手机号码" header-align="center"></el-table-column>         
            <el-table-column align="center" prop="hRegistration" label="注册时间" header-align="center"></el-table-column>     
            <el-table-column label="操作" header-align="center" align="center" width="260">
              <template slot-scope="scope">
                <el-button type="primary" size="mini"
                   @click="handleEditResource(scope.$index, scope.row)">编辑</el-button>                           
                <el-button type="danger" size="mini"
                  @click="handleDeleteMember(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>              
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background     
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="MemberTotal">
          </el-pagination>     
        </el-col>
      </el-row>       
    </el-col>
  </el-row>
</template>

<!-- 会员档案 -->
<script>
import { listMember, getMemberById, removeMember } from '@/api/HMemberofthefile'
import MemberOfTheFileEdit from "@/components/MemberOfTheFile/MemberOfTheFileEdit"

export default {
  data() {
    return {
      loading: false,    
      search: {
        offset: 1,
        limit: 5,
        value:"",
      },
      MemberTotal: 0,
      h_MemberOfTheFileList:[],
    }
  },
  methods: {
    //查询
     getMemberList() {
      this.loading = true;
      listMember(this.search)
        .then((response) => {
          this.MemberTotal = response.data.total;
          this.h_MemberOfTheFileList = response.data.rows;
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    //删除
    handleDeleteMember(index, row) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.loading = true
        removeMember(row.hId)
        .then(response => {
          this.loading = false
          this.getMemberList()
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(error => {
          this.outputError(error)           
        })
      })
      .catch(() => {})
    },
    //修改前查询
    handleEditResource(index, row) {
      this.loading = true
      getMemberById(row.hId)
      .then(response => {
        this.$refs.MemberOfTheFileEdit.$emit('opendEitMemberDialog', response.data)
        this.loading = false        
      })
      .catch(error => {
        this.outputError(error)        
      })
    },
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      this.getMemberList();
    },
    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      this.getMemberList();
    },
    //模态框
    handleCreateRole() {
      this.$refs.MemberOfTheFileEdit.$emit('openAddMemberDialog')
    },
    async pageInit() {
      this.loading = true;
      this.getMemberList()
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })      
    }     
  },
  components: { MemberOfTheFileEdit },
  created() {
    this.pageInit()
  }
}
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.role-locked {
  color: red;
}
.role-not-locked {
  color: green;
}
</style>